<template>
	<div id="permissionManage">
		<el-button style="margin-bottom: 10px" type="success"
			@click="showAddNew=true,parentid=0,parentDesc=''">
			新增权限
		</el-button>
        <el-collapse accordion>
            <el-collapse-item  v-for="(item,key,index) in allPermission" 
            :key="key"
            :name="index"
            :title="item.permissionDesc"
            style="text-align:left;"
            >
            	<template slot="title">
            		<div class="permissionTitle">
            			{{item.permissionDesc}}
            			<el-button class="dele" type="danger" @click.stop="delet(item._id)">删除</el-button>
            		</div>
            	</template>
               <ul>
               	<li style="margin-left: 10px;margin-bottom: 10px;">
               		<el-button type='primary' size="mini"
               			@click="showAddNew=true,parentid=item._id,parentDesc=item.permissionDesc"
               			>新增权限</el-button>
               			
               	</li>
                   <li v-for="(permission,permissionKey) in item.children" 
                   :key="permissionKey"
                   style="padding-left:10px;display: flex;justify-content: space-between;"
                   >
                       {{permission.permissionDesc}}
                       <el-button class="dele" type="danger" @click.stop="delet(item.children._id)">删除</el-button>
                   </li>
               </ul>
            </el-collapse-item>
        </el-collapse>
        <add-view  :showAddNew="showAddNew"
        	:parentid="parentid"
        	:parentDesc="parentDesc"></add-view>
	</div>
</template>
<!--
	<add-view  :showAddNew="showAddNew"></add-view>
	:showAddNew是子组件的属性，控制子组件
	"showAddNew"为true或者false，是父组件的值
-->
<script >
//导入需要新增权限时的弹框组件
import addView from './addView'
	export default{
		components:{addView},
		data(){
			return {
				 activeName: '1',
				 showAddNew: false,  //默认弹框隐藏，当点击新增按钮是为true，弹框显示
				 parentid:0,
				 parentDesc:""
			}
		},
		mounted(){
			this.$store.dispatch('loadAllPermission');
		},
		computed:{
			//计算属性，处理后的数据拿去渲染到导航栏
			allPermission(){
				//调用getters属性
				return this.$store.getters.allPermission;
			}
		},
		methods:{
			delet(id){
				var action=()=>{
					this.$http.post(this.$apis.deletePermissionById,{_id:id})
					.then((resp)=>{
						this.$message({
							message:resp.data.message,
							type:resp.data.success?"success":"danger"
						});
						if(resp.data.success){
							this.$store.dispatch('loadAllPermission')
						}
					})
				}
				this.operatorConfirm(action,"删除权限");
			}
		}
	}
</script>
<!--
	父组件添加了scoped，在父组件中设置样式是无效的
-->
<style lang="scss" scoped>
	#permissionManage{
		width: 100%;
        height: 100%;
        text-align: left;
	}
	/**/
	#permissionManage /deep/.el-collapse-item__header{
		padding-left:10px;
	}
	.permissionTitle{
		display: flex;
		justify-content: space-between;
	}
	.dele{
		width: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 1px;
	}
</style>
